<template>
  <div class="communitySupportingFacilitiesInfo">
    <div>
      <div class="title">
        <el-icon></el-icon>
        <span>公共厕所</span>
      </div>
      <div
        class="content"
        v-if="info && info.publicRestRoomList && info.publicRestRoomList.length"
      >
        <div
          class="building-info-item"
          v-for="(item, index) in info.publicRestRoomList"
          :key="index"
        >
          <span class="position">点位名称：{{ item.name }}</span>
          <span>建筑面积：{{ item.area ? item.area + '平方米' : '' }}</span>
          <span>是否设置无障碍厕所：{{ item.hasObstacle ? '是' : '否' }}</span>
          <span>位置：{{ JSON.parse(item.position)[2] }}</span>
        </div>
      </div>
      <div class="content" v-else>
        <!--        <el-empty description="暂无数据"/>-->
      </div>
    </div>
    <div>
      <div class="title">
        <el-icon></el-icon>
        <span>生活垃圾收集点（站）</span>
      </div>
      <div
        class="content"
        v-if="info && info.garbageStationList && info.garbageStationList.length"
      >
        <div
          class="building-info-item"
          v-for="(item, index) in info.garbageStationList"
          :key="index"
        >
          <span class="position">点位名称：{{ item.name }}</span>
          <span>建筑面积：{{ item.area ? item.area + '平方米' : '' }}</span>
          <span>位置：{{ JSON.parse(item.position)[2] }}</span>
        </div>
      </div>
      <div class="content" v-else>
        <!--        <el-empty description="暂无数据"/>-->
      </div>
    </div>
    <div>
      <div class="title">
        <el-icon></el-icon>
        <span>过街人行天桥</span>
      </div>
      <div
        class="content"
        v-if="info && info.overlineBridgeList && info.overlineBridgeList.length"
      >
        <div
          class="building-info-item"
          v-for="(item, index) in info.overlineBridgeList"
          :key="index"
        >
          <span class="position">点位名称：{{ item.name }}</span>
          <span>是否安装电梯：{{ item.remark ? '是' : '否' }}</span>
          <span>位置：{{ item.position.split(';')[1] }}</span>
        </div>
      </div>
      <div class="content" v-else>
        <!--        <el-empty description="暂无数据"/>-->
      </div>
    </div>
    <div>
      <div class="title">
        <el-icon></el-icon>
        <span>是否存在管线(水、电、气、通信)问题的楼栋?</span>
      </div>
      <div
        class="content"
        v-if="info && info.pipelineList && info.pipelineList.length"
      >
        <div
          class="building-info-item"
          v-for="(item, index) in info.pipelineList"
          :key="index"
        >
          <span class="position">点位名称：{{ item.name }}</span>
          <span>位置：{{ item.position.split(';')[1] }}</span>
        </div>
      </div>
      <div class="content" v-else>
        <!--        <el-empty description="暂无数据"/>-->
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps({
  info: {
    type: Object,
    default: () => {},
  },
})
</script>

<style scoped lang="scss">
.communitySupportingFacilitiesInfo {
  padding: 15px 10px 15px 5px;
  overflow-y: auto;
  height: 100%;

  :deep(.el-descriptions__label) {
    display: inline-block;
    width: 102px;
  }

  .content {
    padding-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    span {
      font-size: 14px;
      line-height: 32px;
    }
  }

  .title {
    margin-top: 5px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;

    :deep(.el-icon) {
      width: 3px;
      height: 18px;
      margin-right: 6px;
      background-color: #28b1e4;
      border-radius: 2px;
    }

    span {
      font-size: 14px;
      font-weight: bold;
    }
  }

  .building-info-item {
    display: flex;
    flex-direction: column;
    padding: 11px 15px;
    background-color: rgba(249, 249, 252, 1);
    border-radius: 4px;
    margin-bottom: 12px;

    color: #717689;

    .position {
      color: RGBA(39, 71, 95, 1);
    }
  }
}
</style>
